<template>
    <div><el-row :gutter="20">
            <el-col :span="10" v-if="structure === null"><el-card><el-scrollbar height="80vh">
                        <p v-for="item in file" :key="item.id" @click="getHoleStructure(item)" class="scrollbar-demo-item">
                            {{ item.fileName }}</p>
                    </el-scrollbar></el-card></el-col>
            <el-col :span="10" v-if="structure !== null">
                <structure-form :structure="structure" />
            </el-col>
            <el-col :span="14">
                <div ref="d3CanvasRef">
                    <d3-canvas ref="d3Ref"/>
                </div>
            </el-col>
        </el-row></div>
</template>

<script setup>
import D3Canvas from "@/components/D3Canvas/index"
import structureForm from "@/components/Project/HoleStructure/form"
const structure = ref(null)
const file = ref([{ id: 0, fileName: "三开井深结构" }, { id: 1, fileName: "空" }, { id: 2, fileName: "空" }, { id: 3, fileName: "空" }, { id: 4, fileName: "空" }, { id: 5, fileName: "空" }, { id: 6, fileName: "空" }, { id: 7, fileName: "空" }])
function getHoleStructure(item) {
    structure.value = item
}
</script>
<style scoped>
.sidebar-right {
    flex: 0 0 50%;
    background-color: rgb(250, 250, 250);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.sidebar-right:hover {
    border-color: rgba(0, 0, 0, 0.5);
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    height: 65px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.scrollbar-demo-item:hover {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.scrollbar-demo-item:active {
    background: var(--el-color-primary-light-8)
}
</style>